<template>
  <div class="content">
    <!-- 头部 -->
    <div class="header">
      <van-icon name="arrow-left" @click="goBack" />
      <span>登录</span>
    </div>

    <van-form @submit="onSubmit" style="margin-top: 30px">
      <van-field
        v-model="username"
        name="用户名"
        label=""
        placeholder="手机号/账户名/邮箱"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label=""
        placeholder="请输入密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px">
        <van-button
          class="submit"
          round
          block
          type="info"
          native-type="submit"
          @click="login"
          >登录</van-button
        >
        <!-- 弹出框 -->
        <p class="msg">{{msg}}</p>
        <!-- 跳到注册页 -->
        <span>
          <router-link to="/Reg/index" class="go">手机快速注册</router-link>
        </span>
      </div>
    </van-form>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name:"Login",
  data() {
    return {
      username: "19090663736",
      password: "123456",
      msg:"",
        iconname:"closed-eye",
        flag :true,
        inputtype : "password"
    };
  },
  created() {
 
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    onSubmit(values) {
      console.log("submit", values);
    },
    login() {
      //点击登录，发送请求判断用户名与密码是否注册
      axios({
          url:"/api/user/login",
          method:"post",
          data:{
            loginname:this.username,
            password:this.password
          }
        }).then((res)=>{
          console.log(res.data.data);
          if(!this.username || !this.password) {
            alert("不能为空");
          }
          else if (res.data.code == "10011") {
             this.msg = "密码错误"
             return 
          }else if(res.data.code == "10010"){
            this.msg = "此账号还未注册，请先注册"
            setTimeout(()=>{
              this.$router.push('/Reg/index')
            },500);
            return
          }else if(res.data.code == "200"){
            localStorage.setItem("token", res.data.data.token);
            localStorage.setItem("userid", res.data.data.userid);
            localStorage.setItem("username",this.username)
            localStorage.setItem("tel",this.tel)
            localStorage.setItem("loginState",true)
            // this.$router.push('/ShoppingCar')
            
              this.$router.push('/My')
            
          }
        })

      }

  },
};
</script>

<style scoped>
.header {
  height: 3.5rem;
  text-align: center;
  font-size: 1.3rem;
  line-height: 3.5rem;
  border-bottom: 2px solid gray;
}
.van-icon {
  float: left;
  padding-left: 10px;
  line-height: 3.5rem;
  color: rgb(24, 24, 64);
}
.submit {
  color: white;
  background: linear-gradient(
    to right,
    rgba(255, 96, 52, 0.607),
    rgb(238, 10, 36, 0.607)
  );
}
.go {
  float: right;
  color: blue;
  margin-top: 0.8333rem;
}
</style>